<template>
  <div class="quote-game-container">
    <h1>跟打名言</h1>
    <div class="quote-area">
      <div class="quote-text">
        <span v-for="(char, idx) in quoteArr" :key="idx" :class="charClass(idx)">{{ char }}</span>
      </div>
    </div>
    <textarea v-model="inputValue" @input="checkInput" class="quote-input" placeholder="请跟打上方名言..." :disabled="isFinished" />
    <div class="quote-info">
      <span>速度：{{ wpm }} WPM</span>
      <span>准确率：{{ accuracy }}%</span>
      <span>用时：{{ timeElapsed }}秒</span>
    </div>
    <button @click="resetGame" class="quote-btn">{{ isFinished ? '重玩' : '重置' }}</button>
  </div>
</template>
<script>
const quotes = [
  'The only limit to our realization of tomorrow is our doubts of today.',
  'Success is not final, failure is not fatal: it is the courage to continue that counts.',
  'Happiness depends upon ourselves.',
  'The best way to predict the future is to create it.',
  "Life is what happens when you're busy making other plans.",
  "Don't watch the clock; do what it does. Keep going.",
  "Believe you can and you're halfway there."
];
export default {
  name: 'TypingGameQuote',
  data() {
    return {
      quote: '',
      quoteArr: [],
      inputValue: '',
      startTime: null,
      timeElapsed: 0,
      timer: null,
      isFinished: false,
      wpm: 0,
      accuracy: 100
    }
  },
  methods: {
    getRandomQuote() {
      return quotes[Math.floor(Math.random() * quotes.length)];
    },
    charClass(idx) {
      if (idx < this.inputValue.length) {
        return this.inputValue[idx] === this.quoteArr[idx] ? 'correct' : 'incorrect';
      }
      if (idx === this.inputValue.length) return 'current';
      return '';
    },
    checkInput() {
      if (!this.startTime) {
        this.startTime = Date.now();
        this.startTimer();
      }
      if (this.inputValue.length >= this.quoteArr.length) {
        this.finishGame();
      }
      this.calculateStats();
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.timeElapsed = Math.floor((Date.now() - this.startTime) / 1000);
      }, 1000);
    },
    calculateStats() {
      const words = this.inputValue.trim().split(/\s+/).length;
      const minutes = this.timeElapsed / 60;
      this.wpm = Math.round(words / (minutes || 1/60));
      let correctChars = 0;
      for (let i = 0; i < this.inputValue.length; i++) {
        if (this.inputValue[i] === this.quoteArr[i]) correctChars++;
      }
      this.accuracy = this.inputValue.length ? Math.round((correctChars / this.inputValue.length) * 100) : 100;
    },
    finishGame() {
      this.isFinished = true;
      clearInterval(this.timer);
    },
    resetGame() {
      this.quote = this.getRandomQuote();
      this.quoteArr = this.quote.split('');
      this.inputValue = '';
      this.startTime = null;
      this.timeElapsed = 0;
      this.isFinished = false;
      this.wpm = 0;
      this.accuracy = 100;
      clearInterval(this.timer);
    }
  },
  mounted() {
    this.resetGame();
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  }
}
</script>
<style scoped>
.quote-game-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 2rem;
  background: var(--hover-color);
  border-radius: 10px;
  color: var(--text-color);
  text-align: center;
}
.quote-area {
  margin-bottom: 2rem;
}
.quote-text {
  font-size: 1.3rem;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 1.2rem;
  text-align: left;
  word-break: break-all;
}
.correct {
  color: #28a745;
}
.incorrect {
  color: #dc3545;
  text-decoration: underline;
}
.current {
  background: #e3f2fd;
  border-radius: 2px;
}
.quote-input {
  width: 90%;
  min-height: 60px;
  padding: 0.7rem 1rem;
  font-size: 1.1rem;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  margin: 1rem 0;
}
.quote-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.quote-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 1rem;
}
.quote-btn:hover {
  background: #1565c0;
}
</style> 